import React from 'react'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { Ionicons } from '@expo/vector-icons'
import HomeScreen from '../screens/HomeScreen'
import CoursesScreen from '../screens/CoursesScreen'
import ProjectsScreen from '../screens/ProjectsScreen'
import MyTestScreen from '../screens/MyTestScreen'

const activeColor = '#4775f2'
const inactiveColor = '#b8bece'

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({ navigation }) => {
        // console.log('navigation', navigation)
        return {
          tabBarLabel: 'Home',
          tabBarIcon: ({ focused }) => {
            return (
              <Ionicons
                name="ios-home"
                size={26}
                color={focused ? activeColor : inactiveColor}
              />
            )
          }
        }
      }
    },
    Courses: {
      screen: CoursesScreen,
      navigationOptions: {
        tabBarLabel: 'Courses',
        tabBarIcon: ({ focused }) => {
          return (
            <Ionicons
              name="ios-albums"
              size={26}
              color={focused ? activeColor : inactiveColor}
            />
          )
        }
      }
    },
    Projects: {
      screen: ProjectsScreen,
      navigationOptions: {
        tabBarLabel: 'Projects',
        tabBarIcon: ({ focused }) => {
          return (
            <Ionicons
              name="ios-folder"
              size={26}
              color={focused ? activeColor : inactiveColor}
            />
          )
        }
      }
    },
    MyTest: {
      screen: MyTestScreen,
      navigationOptions: {
        tabBarLabel: 'MyTest',
        tabBarIcon: ({ focused }) => {
          return (
            <Ionicons
              name="ios-hourglass"
              size={26}
              color={focused ? activeColor : inactiveColor}
            />
          )
        }
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => {
      let routeName = navigation.state.routes[navigation.state.index].routeName
      if (routeName === 'MyTest') {
        return { title: 'MyTest', headerBackTitle: '返回' }
      }

      return {
        header: null
      }
    }
  }
)

export default TabNavigator
